<template lang="">
  <div class="upload">
    <el-upload
      class="avatar-uploader"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :action="aciton"
      :data="{ groupid: groupid }"
      :headers="{ token: getToken() }"
    >
      <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> -->
      <slot name="content"></slot>
    </el-upload>
  </div>
</template>
<script setup>
import { getToken } from "@/stores/modules/home.ts";
import ElMessage from "@/components/ElMessage.js";
import http from "@http";
let props = defineProps(["uploadFileUrl", "groupid"]);
let emit = defineEmits(["successImg", "getFile"]);
let aciton = ref(import.meta.env.VITE_UPLOAD_URL);
let imgUrl = ref("");
let fileName = ref("");
let loading = ref(false)
let data = ref([]);
watch(
  () => props.uploadFileUrl,
  () => {
    console.log(props.uploadFileUrl, "props.uploadFileUrl");
    if (props.uploadFileUrl) {
      aciton.value = props.uploadFileUrl;
    }
  },
  { deep: true, immediate: true }
);
let handleAvatarSuccess = (resolve) => {
  if (resolve.code == 0) {
    ElMessage({ msg: "上传成功" });
    loading.value.close()
    imgUrl.value = resolve.data.url;
    fileName.value = resolve.data.filename;
 
    emit("successImg", resolve.data.url);

    emit("getFile", { url: resolve?.data?.url, filename: resolve?.data?.filename,data:resolve?.data});
  }
};
let beforeAvatarUpload = (file) => {
  console.log(file, "file");
   loading.value = ElLoading.service({
    lock: true,
    text: "上传中......",
    background: "rgba(0, 0, 0, 0.7)",
  });
};
defineExpose({
  imgUrl,
  fileName,
 
});
</script>
<style lang="scss" scoped>
.upload {
  :deep(.el-upload) {
    border: none !important;
  }
}
</style>
